<template>
  <div>
    <Headers />
    <div class="content">
      <div class="left">
        <LeftUp class="left_up" />
        <LeftCenter class="left_center" />
        <LeftDown class="left_down" />
      </div>
      <div class="center">
        <div ref="maps" class="maps"></div>
      </div>
      <div class="right">
        <RightUp class="right_up" />
        <RightCenter class="right_center" />
        <RightDown class="right_down" />
      </div>
    </div>


    <PopUp title="重点市场详情" @closePopUp="visible = false" v-if="visible">
      <div class="popContent">
        <img class="popPic" v-if="curPopUpData.imageUrl" :src="curPopUpData.imageUrl[0]" alt="" />
        <div class="popTitle">
          <PopUpTitle :title="curPopUpData.name" />
          <div class="popText">{{ curPopUpData.remark }}</div>
        </div>
      </div>
    </PopUp>

  </div>
</template>

<script setup>
import Headers from "../../components/Header.vue";
import PopUp from '@/components/PopUp.vue'
import PopUpTitle from "@/components/PopUpTitle.vue";
import LeftUp from "./component/LeftUp.vue";
import LeftCenter from "./component/LeftCenter.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";

import http from "@/api/http";
import { env } from "@/utils/env";
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import chinaJson from "@/assets/china.json";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);
const mapData = ref([]);
const visible = ref(false)
const curPopUpData = ref({})
var myChart
onMounted(async () => {

  let ress = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/monitor/trading/market/list",
    method: "get",
  });

  mapData.value = ress.data;

  let regions = mapData.value.map((item) => {
    return {
      name: item.provinceName,
      value: item.price,
      itemStyle: {
        areaColor: "red",
      },
      label: {
        show: false, // 隐藏文字
      },
    };
  });

  regions.push({
    name: "南海诸岛",
    itemStyle: {
      // 隐藏地图
      normal: {
        opacity: 0, // 为 0 时不绘制该图形
      },
    },
    label: {
      show: false, // 隐藏文字
    },
  });

  // let seriesData = [
  //   [119.901000, 27.233799, 41, '柘荣县交易市场', 10184.4, 55.2],
  //   [106.630001, 26.647600, 41, '贵州交易市场', 5295.15, 28.7],
  //   [117.227000, 31.820301, 41, '安徽交易市场', 2970.45, 16.1]
  // ]

  let seriesData = mapData.value.map(item => [
    item.lng, item.lat, item.currPrice, item.name
  ])
  

  myChart = echarts.init(maps.value);
  echarts.registerMap("china", chinaJson);
  myChart.setOption({
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(89,183,247,0.21)",
      formatter: (params) => {


        return `<div style='font-size: 12px; color: #fff'>
          交易市场：${params.data[3]}<br>
          太子参价格：${params.data[2]} 元/kg<br>
         
          </div>`;
      },
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    geo: [
      {
        map: "china", //必须写
        roam: true, // 拖拽功能；自选关闭开启
        zoom: 1.235, //地图缩放比例
        center: [105, 29], //地图位置
        //地图省份的样式；包括板块颜色和边框颜色
        itemStyle: {
          normal: {
            areaColor: "rgb(20,57,75)",
            borderWidth: 1,
            borderColor: "rgb(45,215,172)",
          },
        },
        label: {
          show: false,
          color: '#fff'
        }
        // regions: regions,
        // tooltip: {
        //   trigger: "axis",
        //   backgroundColor: "rgba(89,183,247,0.21)",
        //   formatter: (params) => {
        //     let res = mapData.value.find((item) => {
        //       return item.provinceName == params.name;
        //     });
        //     let content = `<div style='font-size: 12px; color: #fff'>${params.name
        //       } ${res?.price || 0}</div>`;
        //     return content;
        //   },
        //   textStyle: {
        //     color: "#fff", //设置文字颜色
        //   },
        // },
      },
      // {
      //   map: "china", //必须写
      //   roam: false, // 拖拽功能；自选关闭开启
      //   zoom: 1.235, //地图缩放比例
      //   center: [105, 29], //地图位置
      //   //地图省份的样式；包括板块颜色和边框颜色
      //   itemStyle: {
      //     shadowblur: 8,
      //     shadowColor: "rgb(45,215,172)",
      //     shadowOffsetX: -3,
      //     shadowOffsetY: 3,
      //   },
      //   zlevel: -1,
      //   // layoutCenter: ["50%", "49%"],
      //   // layoutSize: "100%",
      //   roam: false,
      //   silent: true,
      //   regions: [
      //     {
      //       name: "南海诸岛",
      //       itemStyle: {
      //         normal: {
      //           opacity: 0, // 为 0 时不绘制该图形
      //         },
      //       },
      //       label: {
      //         show: false, // 隐藏文字
      //       },
      //     },
      //   ],
      // },
    ],
    series: {
      type: "effectScatter",
      coordinateSystem: "geo",
      geoIndex: 0,
      symbolSize(value, params) {

        // fitChartSize(15),
        return fitChartSize(15);
      },

      itemStyle: {
        color: "rgb(45,215,172)",
      },
      rippleEffect: {
        brushType: "stroke",
      },
      encode: {
        tooltip: 2,
      },
      data: seriesData,
    },
  });

  // myChart.on('mouseover', function (params) {
  //   console.log(params, 'paramsparams')
  // })
  myChart.on("click", (params) => {

    if (params.seriesType == "effectScatter") {

      for (let m of mapData.value) {
        if (m.name == params.data[3]) {
          curPopUpData.value = m;
        }
      }
      visible.value = true
    }
  });


  showTip(seriesData)
  setInterval(() => {
    showTip(seriesData)
  }, 3000)
});


let playIndex = 0
const showTip = (seriesData) => {
  myChart.dispatchAction({
      type: 'hideTip'
    })
    playIndex++
  
    // 可以通过 batch 参数批量分发多个 action
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex:0 ,
      dataIndex: playIndex % seriesData.length
    })
}
</script>

<style scoped lang="scss">
.maps {
  height: vh(720);
  //   width: vw(400);
  width: 100%;
}

.content {
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
}

.left {
  width: 27%;
}

.left_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_down {
  margin: vh(10) vw(10);
  height: vh(230);
}

.center {
  /* flex-grow: 1; */
  width: 46%;
}

.right {
  width: 27%;
}

.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_down {
  margin: vh(10) vw(10);
  height: vh(230);
}

.popContent {
  padding: 3.5vh 4vh;
  display: flex;
}

.popPic {
  width: 26.8055555556vw;
  height: 32.25vh;
  margin-right: 1.3888888889vw;
  object-fit: cover;
}

.popText {
  font-weight: 400;
  font-size: .8333333333vw;
  color: #6ce5e4;
  line-height: 2.1527777778vw;
  margin-top: 1.25vh;
}
</style>